<template>
  <div class="pie-root" :style="`height: ${height};`" :id="domId"></div>
</template>

<script>
import echarts from "echarts";
import { deepMerge } from "@/utils/assist.js";
import { setting } from './setting.js'

export default {
  name: "echarts-pie",
  components: {},
  props: {
    domId: {
      type: String,
      default: "echarts-pie",
    },
    height: {
      type: String,
      default: "300px",
    },
    chartsData: {
      type: Object,
      default: function () {
        return {
          xData: [],
          yData: [],
        };
      },
    },
    myOption: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      colorList: setting.pie_line_colorList,
    };
  },
  watch: {
    chartsData: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        this.$nextTick(() => {
          this.draw();
        });
        // this.draw();
      },
      deep: true,
      immediate: true,
    },
    myOption: {
      handler(newVal, oldVal) {
        // console.log(newVal)
        this.$nextTick(() => {
          this.draw();
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    draw() {
      // console.log(document.getElementById(this.domId))

      if (!document.getElementById(this.domId)) {
        console.warn("初始化echarts dom标签未找到");
        return;
      }
      let myChart = echarts.init(document.getElementById(this.domId));
      let option = {
        title: {
          
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          
        },
        
        // calculable: true,
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },
        ],
      };

      let yData = this.chartsData.yData;
      if (yData[0] && yData[0].data) {
        option.series = [];
        yData.forEach((item, index) => {
          option.series.push({
            type: "pie",
            radius : ['40%', '60%'],
            center: ["50%", "50%"],
            ...item,
            itemStyle: {
              normal: {
                color: (params) => {
                  return new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: this.colorList[params.dataIndex].colorStart},
                      {offset: 1, color: this.colorList[params.dataIndex].colorEnd},
                    ]
                  )
                }
              }
            }
          });
        });
      } else {
        option.series[0] = {
          name: "",
          type: "pie",
          radius : ['40%', '60%'],
          center: ["50%", "50%"],
          data: yData,
          itemStyle: {
            normal: {
              color: (params) => {
                return new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: this.colorList[params.dataIndex].colorStart},
                    {offset: 1, color: this.colorList[params.dataIndex].colorEnd},
                  ]
                )
              }
            }
          }
        };
      }

      option = deepMerge(option, this.myOption);
      // console.log(option)
      option && myChart.setOption(option);
    },
  },
  mounted() {
    // console.log(document.getElementById(this.domId))
  },
};
</script>

<style lang="scss" scoped>
.pie-root {
  // height: 300px;
}
</style>
